<!doctype html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:target</title>
<style>
@import url("tab1.css");
@import url("tab2.css");
html, body { margin: 5px; padding: 0 };

html.ifie6 :unknown { /* force reload in ie6 */ };

</style>
<!--
<script src="../../../src/uuMeta.js"></script>
<script src="../../../src/uuResize.js"></script>
<script src="../../../src/uuStyle.js"></script>
<script src="../../../src/uuStyleSheet.js"></script>
<script src="../../../src/uuQuery.js"></script>
<script src="../../../src/uuColor.js"></script>
<script src="../../../src/uuCanvas.js"></script>
<script src="../../../src/uuLayer.js"></script>
<script src="../../../src/uuAltCSS.js"></script>
<script src="../../../src/uuAltCSS+.js"></script>
 -->
<script src="../../uuAltCSS.js"></script>

</head><body>
<a href="../../README.htm">BACK</a>

<input type="button" value="revalidate" onclick="uuAltCSS()" />

<h1>Revalidate Context</h1>
<p>特定のノード以下に限定してCSSの再評価を実行できます。</p>
<p>左側のタブをクリックした場合は、左側のタブメニューだけを再評価します。</p>
<p>右側も同様です。</p>
<p>[revalidate] ボタンは全体を再評価します(タブを選択している場合は、状態がリセットされます)。</p>


<!-- tab1 -->
<div style="position: absolute; height: 300px; width: 300px;">
  <div class="tab1" id="self1">
    <ul>
      <li><a href="#tab1" onclick="uuAltCSS('self1')">Head1</a></li>
      <li><a href="#tab2" onclick="uuAltCSS('self1')">Head2</a></li>
      <li><a href="#tab3" onclick="uuAltCSS('self1')">Head3</a></li>
      <li><a href="#tab4" onclick="uuAltCSS('self1')">Head4</a></li>
    </ul>
    <div>
      <div id="tab1"><h2>tab1</h2>Body1</div>
      <div id="tab2"><h2>tab2</h2>Body2</div>
      <div id="tab3"><h2>tab3</h2>Body3</div>
      <div id="tab4"><h2>tab4</h2>Body4</div>
    </div>
    <div>
      <span>[footer]</span>
    </div>
  </div>
</div>

<!-- tab2 -->
<div style="position: absolute; left: 420px; height: 300px; width: 400px;">
  <div class="tab2" id="self2" style="background-color: #ddd">
    <p id="menu">
      <a href="#text1" id="menu1" onclick="uuAltCSS('self2')">text1</a>
      <a href="#text2" id="menu2" onclick="uuAltCSS('self2')">text2</a>
      <a href="#text3" id="menu3" onclick="uuAltCSS('self2')">text3</a>
      <a href="#text4" id="menu4" onclick="uuAltCSS('self2')">text4</a>
      <a href="#text5" id="menu5" onclick="uuAltCSS('self2')">text5</a>
    </p>
    <div id="text1"><h2>text1</h2><p>text1 body</p></div>
    <div id="text2"><h2>text2</h2><p>text2 body</p></div>
    <div id="text3"><h2>text3</h2><p>text3 body</p></div>
    <div id="text4"><h2>text4</h2><p>text4 body</p></div>
    <div id="text5"><h2>text5</h2><p>text5 body</p></div>
  </div>
</div>

</body></html>
